<template>
  <BasicDrawer v-bind="$attrs" @register="register" title="Drawer Title" width="50%">
    <div>
      <BasicForm @register="registerForm" />
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'

import { BasicForm, FormSchema, useForm } from '@/components/Form'
const schemas: FormSchema[] = [
  {
    field: 'field1',
    component: 'Input',
    label: '字段1',
    colProps: {
      span: 12
    },
    defaultValue: '111'
  },
  {
    field: 'field2',
    component: 'Input',
    label: '字段2',
    colProps: {
      span: 12
    }
  }
]
const [registerForm, { setFieldsValue }] = useForm({
  labelWidth: 120,
  schemas,
  showActionButtonGroup: false,
  actionColOptions: {
    span: 24
  }
})
const [register] = useDrawerInner((data) => {
  // 方式1
  setFieldsValue({
    field2: data.data,
    field1: data.info
  })
})
</script>
